<template>
  <view
    class="historical-arrears"
    @click="fatherChange"
    :class="aloneChecked ? 'select' : ''"
  >
    <view class="title">宽带账单</view>
    <view class="information">
      <view class="information_box">
        <view class="information_item">欠费周期：{{ infoData?.cycle }}</view>
        <view class="information_item"
          >宽带月租：{{ infoData?.monthly }} 元/月</view
        >
        <view class="information_item"
          >应缴金额：{{ infoData?.payable }} 元</view
        >
<!--        <view class="information_item"
          >下次缴费时间：{{
            infoData?.followUp
          }}</view
        >-->
        <view class="information_item">备注：{{ infoData?.notes }}</view>
        <view class="information_item"
          >支付状态：{{
            infoData?.userPayStatus == "0" ? "未支付" : "已支付"
          }}</view>
		<view class="information_item">
			<view class="room">
				<p>注：</p>
				您正在对房间{{ infoData?.account }}进行缴费，请确认金额和房号，如缴错费用，系统不支持退费，请线下联系客服办理退费手续。
			</view>
		</view>  
      </view>
      <view class="ch" v-if="infoData.userPayStatus == '0'">
        <up-checkbox
          size="28rpx"
          name="agree"
          :usedAlone="true"
          @change="checkboxChange"
          :checked="aloneChecked"
        >
        </up-checkbox>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, defineEmits, defineProps, watch } from "vue";
const props = defineProps({
  infoData: {
    type: Object,
  },
  activeId: {
    type: String,
  },
});
const emits = defineEmits(["on-change"]);

const aloneChecked = ref(false);
const timeData = ref("");
watch(
  () => props.activeId,
  (n, o) => {
    if (n !== props.infoData.id) {
      aloneChecked.value = false;
    } else {
      aloneChecked.value = true;
    }
  }
);
function checkboxChange(n) {
  if (props.infoData.userPayStatus == "0") {
    aloneChecked.value = n;
    if (aloneChecked.value) {
      emits("on-change", props.infoData);
    } else {
      emits("on-change", {});
    }
  }
}
function fatherChange() {
  if (props.infoData.userPayStatus == "0") {
    aloneChecked.value = !aloneChecked.value;
    if (aloneChecked.value) {
      emits("on-change", props.infoData);
    } else {
      emits("on-change", {});
    }
  }
}

function getNextMonthDate() {
  const now = new Date();
  const nextMonth = new Date(
    now.getFullYear(),
    now.getMonth() + 1,
    now.getDate()
  );
  timeData.value = `${now.getMonth()}月`
  const time = nextMonth.toISOString().split("T")[0];
  return time;
}
</script>

<style lang="less">
.historical-arrears {
  width: 80vw;
  border: 1rpx solid #d7d7d7;
  border-radius: 10rpx;
  padding: 30rpx;
  margin-top: 20rpx;
  .title {
    color: #333333;
    text-align: center;
    margin-bottom: 30rpx;
    font-size: @font-size-36;
  }
  .information {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    .information_box {
      padding-inline-start: 0;
      .information_item {
        list-style-type: none;
        margin: 15rpx 0;
        font-weight: 400;
        color: #333333;
		.room{
			font-size: @font-size-39;
			color: @color-red;
		}
      }
    }
  }
  &.select {
    background-color: #3ec2ff;
    .title {
      color: @color-font;
    }
    .information {
      .information_box {
        .information_item {
          color: @color-font;
        }
      }
    }
  }
}
</style>